<template>
<!-- 登录页面 -->
  <div class="login-container">
    <van-nav-bar
    class="app-nav-bar" 
    title="登录"
    left-arrow
     @click-left="$router.back()"
    />
    <!-- 表单 -->
    <van-form 
        :show-error-message="false"
        :show-error="false"
        validate-first
        @submit="onLogin"
        @failed="onFailed"
        >
        <van-field
            v-model="user.mobile"
            icon-prefix="toutiao"
            left-icon="shouji"
            placeholder="请输入手机号"
            :rules="fromRules.mobile"
        />
        <van-field
            v-model="user.code"
            clearable
            icon-prefix="toutiao"
            left-icon="yanzhengma"
            placeholder="请输入验证码"   
            :rules="fromRules.code"
        >
        <template #button>
            <van-button size="small" type="primary" class="send-btn">发送验证码</van-button>
        </template>
        </van-field>
        <!-- 按钮 -->
        <div class="login-btn-warp">
            <van-button type="primary" block class="login-btn">登录</van-button>
        </div>
    </van-form>
    <div class="tishi">
        <p>账号：13911111113</p>
        <p>验证码：246810</p>
    </div>
  </div>
</template>

<script>
import {login} from '@/api/user'
import { Toast } from 'vant'
import Vue from 'vue'

Vue.use(Toast);

export default {
  data() {
    return {
     user:{
         mobile:'13911111113',//手机号
         code:'246810'//验证码
     },
     fromRules:{
         mobile:[
             {required:true,message: '手机号格式错误',},
             {pattern:/^1[3|5|7|9]\d{9}$/,message: '手机号格式错误'}
         ],
         code:[
             {required:true,message: '验证码格式错误' },
             {pattern:/\d{6}/,message: '验证码格式错误'}
         ]
     }
    };
  },
  methods:{
    async onLogin(){
        //1.找到数据接口
        //2.封装请求方法
        //3.请求调用登录
        //4.处理响应结果
        Toast.loading({
        message: '加载中...',
        forbidClick: true,
        });
        try{
            const res = await login(this.user);
            // console.log(res);
            // console.log(this.user);
            Toast.success('登录成功');
            //将后端返回的用户数据（token等数据）放到vuex中
            this.$store.commit('setUser', res.data.data);    

            this.$router.back();
            }
            catch(err){
                console.log(err,"shibai")
                Toast.fail('登录失败');
            }
    },
    onFailed(error){
        if(error.errors[0]){
            this.$toast({
                message:error.errors[0].message,
                position:top
            });
        }
        // console.log(error)
    }
  }
};
</script>

<style lang="less" scoped>
    .login-btn-warp{
        padding:26px 16px;
        .login-btn{
            background: #6db4fb;
            border:none;
        }
    }
    .send-btn{
        background:#ededed;
        color: #666;
        border-radius:30px;
        border:none;
        width:76px;
        height:23px;
        font-size:11px;
    }
    .tishi{
        font-size:16px;
        color:#666;
        text-align:center;
    }
</style>